{% block sw_cms_element_vimeo_video_config %}
<div class="sw-cms-el-config-vimeo-video">

    {% block sw_cms_element_vimeo_video_config_video_id %}

    <mt-text-field
        v-model="videoID"
        class="sw-cms-el-config-vimeo-video__video-id"
        :label="$tc('sw-cms.elements.vimeoVideo.config.label.videoId')"
        :placeholder="$tc('sw-cms.elements.vimeoVideo.config.placeholder.videoId')"
    />
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_title %}

    <mt-text-field
        v-model="element.config.iframeTitle.value"
        :label="$tc('sw-cms.elements.vimeoVideo.config.label.videoTitle')"
        :placeholder="$tc('sw-cms.elements.vimeoVideo.config.placeholder.videoTitle')"
    />
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_player_controls %}
    <div class="sw-cms-el-config-vimeo-video__player-controls">

        {% block sw_cms_element_vimeo_video_config_autoplay %}

        <mt-switch
            v-model="element.config.autoplay.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.autoPlay')"
            :help-text="$tc('sw-cms.elements.vimeoVideo.config.helpText.autoPlay')"
        />
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_do_not_track %}

        <mt-switch
            v-model="element.config.doNotTrack.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.advancedPrivacy')"
            :help-text="$tc('sw-cms.elements.vimeoVideo.config.helpText.advancedPrivacy')"
        />
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_loop %}

        <mt-switch
            v-model="element.config.loop.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.loop')"
        />
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_controls %}

        <mt-switch
            v-model="element.config.controls.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.showControls')"
        />
        {% endblock %}

    </div>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_color %}
    <mt-colorpicker
        v-model="element.config.color.value"
        class="sw-cms-el-config-vimeo-video__color"
        :label="$tc('sw-cms.elements.vimeoVideo.config.label.controlsColor')"
        :z-index="1001"
        :alpha="false"
    />
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_artist_information %}
    <div class="sw-cms-el-config-vimeo-video__artist-information">

        {% block sw_cms_element_vimeo_video_config_byline %}

        <mt-switch
            v-model="element.config.byLine.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.byLine')"
        />
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_portrait %}

        <mt-switch
            v-model="element.config.portrait.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.showPortrait')"
        />
        {% endblock %}

        {% block sw_cms_element_vimeo_video_config_title %}

        <mt-switch
            v-model="element.config.title.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.showTitle')"
        />
        {% endblock %}

    </div>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_needs_confirmation %}
    <div class="sw-cms-el-config-vimeo-video__confirmation">

        <mt-switch
            v-model="element.config.needsConfirmation.value"
            :label="$tc('sw-cms.elements.vimeoVideo.config.label.needsConfirmation')"
        />
    </div>
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_preview_media %}
    <sw-cms-mapping-field
        v-if="element.config.needsConfirmation.value"
        v-model:config="element.config.previewMedia"
        :label="$tc('sw-cms.elements.vimeoVideo.config.label.previewImage')"
        value-types="entity"
        entity="media"
    >
        <sw-media-upload-v2
            variant="regular"
            :upload-tag="uploadTag"
            :source="previewSource"
            :allow-multi-select="false"
            :default-folder="cmsPageState.pageEntityName"
            :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
            @media-upload-sidebar-open="onOpenMediaModal"
            @media-upload-remove-image="onImageRemove"
        />

        {% block sw_cms_element_vimeo_video_config_preview_media_display %}
        <template #preview="{ demoValue }">
            <div class="sw-cms-el-config-image__mapping-preview">
                <img
                    v-if="demoValue.url"
                    :src="demoValue.url"
                    alt=""
                >
                <mt-banner
                    v-else
                    class="sw-cms-el-config-image__preview-info"
                    variant="info"
                >
                    {{ $tc('sw-cms.detail.label.mappingEmptyPreview') }}
                </mt-banner>
            </div>
        </template>
        {% endblock %}
    </sw-cms-mapping-field>

    {% block sw_cms_element_vimeo_video_config_preview_media_upload_listener %}
    <sw-upload-listener
        :upload-tag="uploadTag"
        auto-upload
        @media-upload-finish="onImageUpload"
    />
    {% endblock %}

    {% block sw_cms_element_vimeo_video_config_preview_media_modal %}
    <sw-media-modal-v2
        v-if="mediaModalIsOpen"
        variant="full"
        :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
        :entity-context="cmsPageState.entityName"
        :allow-multi-select="false"
        :initial-folder-id="cmsPageState.defaultMediaFolderId"
        @media-upload-remove-image="onImageRemove"
        @media-modal-selection-change="onSelectionChanges"
        @modal-close="onCloseModal"
    />
    {% endblock %}
    {% endblock %}
</div>
{% endblock %}
